<div class="card">
  <div class="card-header">
    Mapping
    <div class="float-right">
      <form [formGroup]="previewIndexSelectionForm">
        <select formControlName="indexSelection" class="custom-select custom-select-sm">
          <option *ngFor="let _ of parsedData?.entries; let idx = index" [value]="idx">
            Row: {{idx}}
          </option>
        </select>
      </form>
    </div>
    <div class="clearfix"></div>
  </div>
  <table class="table">
    <thead>
    <tr>
      <th>Identifier</th>
      <th *ngIf="parserConfig?.header">Header</th>
      <th *ngIf="!parserConfig?.header">Index</th>
      <th>Example</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let _ of [].constructor(parsedData?.entry_length); let idx = index">
      <td dndDropzone [dndEffectAllowed]="allowedEffect"
          (dndDrop)="onDrop($event, currentMapping, idx, mappingControls)">
        <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
          <span>
            <strong *ngIf="currentMapping[idx]?.ref_name">{{currentMapping[idx]?.type_name}}: </strong>
            {{currentMapping[idx]?.label}}
          </span>
          <button (click)="onRemove(idx, currentMapping, mappingControls)" type="button" class="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </td>
      <th *ngIf="parserConfig?.header">{{parsedData?.header[idx]}}</th>
      <th *ngIf="!parserConfig?.header">{{idx}}</th>
      <td>{{parsedData?.entries[previewIndex][idx]}}</td>
    </tr>
    </tbody>
  </table>
</div>
